import React from 'react'
import './style.css'


export class TabControl extends React.Component{
  constructor(prop){
    super(prop)
    this.state={
      currentInde:0,
    }
  }
  onClickSpan(param){
    // console.log(param,'param',);
    this.setState({
      currentInde:param
    })
    this.props.getTitleName(param)
  }
  render(){
    const { title } = this.props
    const { currentInde }  = this.state
    return(
      <div className='tab'>
        {
          title.map((item,index)=>{
            return (
              <span onClick={ e =>this.onClickSpan(index)} key={index} className={`tab_item ${currentInde === index ?'active':''}`}>{item}</span>
            )
          })
        }
      </div>
    )
  }
}